<template>
	<view class="container">
		<!-- 顶部渐变背景区域 -->
		<view class="header-section">
			<!-- 作文报告模块 -->
			<view class="report-header">
				<view class="report-left">
					<view class="report-title">作文批改报告</view>
					<view class="report-desc">1. 建议重点训练"是、做"等字。</view>
					<view class="report-desc">2. 重点关注"小明"的学习情况，他的错误较多</view>
				</view>
				<view class="report-right">
					<view class="task-detail f f-a-c f-j-c">任务详情
						<image src="/static/youjiantou.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
					</view>
					<view class="ai-bg">
						<image src="/static/AI.png" class="ai-icon" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 数据统计模块 -->
		<view class="stats-section">
			<view class="stats-grid">
				<view class="stat-item">
					<text class="stat-label">人数:{{ statistics.totalStudents }}</text>
				</view>
				<view class="stat-item">
					<text class="stat-label">提交:{{ statistics.friends }}</text>
				</view>
				<view class="stat-item">
					<text class="stat-label">AI批改:{{ statistics.trainings }}</text>
				</view>
				<view class="stat-item">
					<text class="stat-label">异常:{{ statistics.abnormal }}</text>
				</view>
				<view class="stat-item">
					<text class="stat-label">未审阅:{{ statistics.unreviewed }}</text>
				</view>
				<view class="stat-item">
					<text class="stat-label">未提交:1</text>
				</view>
			</view>

			<view class="summary-stats">
				<view class="summary-item">
					<text class="summary-number">10</text>
					<text class="summary-label">90以上</text>
				</view>
				<view class="summary-item">
					<text class="summary-number">10</text>
					<text class="summary-label">0-90分</text>
				</view>
				<view class="summary-item">
					<text class="summary-number">10</text>
					<text class="summary-label">未批改</text>
				</view>
			</view>
		</view>

		<!-- 错误统计图表 -->
		<view class="chart-section">
			<view class="chart-header">
				<view class="chart-title-wrapper f f-a-c f-j-c">
					<view style="margin-top: -15rpx;" class="chart-title">错误统计</view>
				</view>
			</view>
			<view class="chart-container">
				<eachet></eachet>
			</view>
		</view>

		<!-- 辅导统计图表 -->
		<view class="chart-section">
			<view class="chart-header">
				<view class="chart-title-wrapper f f-a-c f-j-c">
					<view style="margin-top: -15rpx;" class="chart-title">辅导统计</view>
				</view>
			</view>
			<view class="chart-container">
				<eachet2></eachet2>
			</view>
		</view>

		<!-- 作业展示模块 -->
		<view class="homework-section">
			<!-- 异常作业 -->
			<view class="homework-category">
				<view class="category-header">
					<view class="category-tag abnormal">异</view>
					<text class="category-title">异常作业</text>
					<text class="category-action">分享</text>
					<image class="share-icon" src="/static/youjiantou.png"></image>
				</view>
				<view class="homework-images">
					<image 
						v-for="(img, index) in abnormalHomework" 
						:key="index"
						:src="img"
						class="homework-img"
						@click="previewImage(img, abnormalHomework)"
					></image>
				</view>
			</view>
			
			<!-- 优秀作业 -->
			<view class="homework-category">
				<view class="category-header">
					<view class="category-tag excellent">优</view>
					<text class="category-title">优秀作业</text>
					<text class="category-action">分享</text>
					<image class="share-icon" src="/static/youjiantou.png"></image>
				</view>
				<view class="homework-images">
					<image 
						v-for="(img, index) in excellentHomework" 
						:key="index"
						:src="img"
						class="homework-img"
						@click="previewImage(img, excellentHomework)"
					></image>
				</view>
			</view>
			
			<!-- 待提升作业 -->
			<view class="homework-category">
				<view class="category-header">
					<view class="category-tag improve">待</view>
					<text class="category-title">待提升作业</text>
					<text class="category-action">分享</text>
					<image class="share-icon" src="/static/youjiantou.png"></image>
				</view>
				<view class="homework-images">
					<image 
						v-for="(img, index) in improvementHomework" 
						:key="index"
						:src="img"
						class="homework-img"
						@click="previewImage(img, improvementHomework)"
					></image>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import uCharts from '@qiun/ucharts';
	import eachet from "@/components/eachet.vue"
	import eachet2 from "@/components/eachet2.vue"
	export default {
		components: {
			eachet,
			eachet2
		},
		data() {
			return {
				statistics: {
					totalStudents: 20,
					friends: 19,
					trainings: 17,
					abnormal: 2,
					unreviewed: 2,
					unsubmittedStudent: '小红',
					allCorrect: 10,
					hasErrors: 7,
					ungraded: 2
				},

				// 图表数据
				errorChartData: {
					categories: ['第1题', '第2题', '第3题', '第4题', '第5题'],
					series: [{
							name: '错误A',
							data: [15, 8, 12, 10, 16]
						},
						{
							name: '错误B',
							data: [20, 15, 18, 14, 20]
						},
						{
							name: '错误C',
							data: [12, 18, 15, 16, 12]
						},
						{
							name: '错误D',
							data: [8, 12, 10, 8, 14]
						}
					]
				},

				tutorChartData: {
					categories: ['第1题', '第2题', '第3题', '第4题', '第5题'],
					series: [{
							name: '辅导A',
							data: [15, 8, 12, 10, 16]
						},
						{
							name: '辅导B',
							data: [20, 15, 18, 14, 20]
						},
						{
							name: '辅导C',
							data: [12, 18, 15, 16, 12]
						},
						{
							name: '辅导D',
							data: [8, 12, 10, 8, 14]
						}
					]
				},

				// 作业图片数据
				abnormalHomework: [
					'/static/1.png',
					'/static/2.jpg',
					'/static/1.png'
				],
				excellentHomework: [
					'/static/1.png',
					'/static/2.jpg',
					'/static/1.png'
				],
				improvementHomework: [
					'/static/1.png',
					'/static/2.jpg',
					'/static/1.png'
				]
			}
		},

		onReady() {
			this.initErrorChart();
			this.initTutorChart();
		},

		methods: {
			// 初始化错误统计图表
			initErrorChart() {
				this.errorChart = new uCharts({
					type: 'column',
					context: uni.createCanvasContext('errorChart', this),
					width: uni.upx2px(690),
					height: uni.upx2px(400),
					categories: this.errorChartData.categories,
					series: this.errorChartData.series,
					animation: true,
					background: '#FFFFFF',
					color: ['#6236FF'],
					padding: [15, 15, 0, 5],
					enableScroll: false,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						itemCount: 10,
						scrollShow: true
					},
					yAxis: {
						gridType: 'dash',
						dashLength: 2,
						data: [{
							min: 0,
							max: 20
						}]
					},
					extra: {
						column: {
							type: 'group',
							width: uni.upx2px(18),
							activeBgColor: '#000000',
							activeBgOpacity: 0.08
						}
					}
				});
			},

			// 初始化辅导统计图表
			initTutorChart() {
				this.tutorChart = new uCharts({
					type: 'column',
					context: uni.createCanvasContext('tutorChart', this),
					width: uni.upx2px(690),
					height: uni.upx2px(400),
					categories: this.tutorChartData.categories,
					series: this.tutorChartData.series,
					animation: true,
					background: '#FFFFFF',
					color: ['#6236FF'],
					padding: [15, 15, 0, 5],
					enableScroll: false,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						itemCount: 10,
						scrollShow: true
					},
					yAxis: {
						gridType: 'dash',
						dashLength: 2,
						data: [{
							min: 0,
							max: 20
						}]
					},
					extra: {
						column: {
							type: 'group',
							width: uni.upx2px(18),
							activeBgColor: '#000000',
							activeBgOpacity: 0.08
						}
					}
				});
			},

			// 图表触摸事件
			touchErrorChart(e) {
				this.errorChart.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},

			moveErrorChart(e) {
				this.errorChart.scroll(e);
			},

			touchEndErrorChart(e) {
				this.errorChart.hideToolTip();
			},

			touchTutorChart(e) {
				this.tutorChart.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},

			moveTutorChart(e) {
				this.tutorChart.scroll(e);
			},

			touchEndTutorChart(e) {
				this.tutorChart.hideToolTip();
			},



			// 预览图片
			previewImage(current, urls) {
				uni.previewImage({
					current: current,
					urls: urls
				});
			},
			
			// 查看具体作业
			viewHomework(homework) {
				uni.navigateTo({
					url: `/pages/homework-detail/index?id=${homework.id}`
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding: 0;
	}

	// 顶部渐变背景区域
	.header-section {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		padding: 40rpx 30rpx 60rpx;
		position: relative;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="80" r="1.5" fill="rgba(255,255,255,0.1)"/></svg>') repeat;
			pointer-events: none;
		}
	}

	// 作文报告模块
	.report-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		position: relative;
		z-index: 1;
	}

	.report-left {
		flex: 1;
		margin-right: 30rpx;
	}

	.report-title {
		font-size: 48rpx;
		font-weight: bold;
		color: white;
		margin-bottom: 20rpx;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	}

	.report-desc {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.9);
		line-height: 1.6;
		margin-bottom: 12rpx;
	}

	.report-right {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 20rpx;
	}

	.task-detail {
		background: rgba(255, 255, 255, 0.2);
		border-radius: 25rpx;
		padding: 12rpx 20rpx;
		font-size: 26rpx;
		color: white;
		backdrop-filter: blur(10rpx);
		border: 1rpx solid rgba(255, 255, 255, 0.3);
		gap: 8rpx;
	}

	.ai-bg {
		width: 80rpx;
		height: 80rpx;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		backdrop-filter: blur(10rpx);
		border: 1rpx solid rgba(255, 255, 255, 0.3);
	}

	.ai-icon {
		width: 40rpx;
		height: 40rpx;
	}

	// 数据统计模块
	.stats-section {
		background: white;
		margin: -30rpx 30rpx 30rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
		position: relative;
		z-index: 2;
	}

	.stats-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20rpx;
		margin-bottom: 30rpx;
	}

	.stat-item {
		text-align: center;
		padding: 20rpx 10rpx;
		background: #f8f9fa;
		border-radius: 12rpx;
	}

	.stat-label {
		font-size: 26rpx;
		color: #666;
		font-weight: 500;
	}

	.summary-stats {
		display: flex;
		justify-content: space-around;
		padding-top: 20rpx;
		border-top: 1rpx solid #eee;
	}

	.summary-item {
		text-align: center;
		flex: 1;
	}

	.summary-number {
		display: block;
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
	}

	.summary-label {
		font-size: 24rpx;
		color: #666;
	}

	// 图表区域
	.chart-section {
		background: white;
		margin: 0 30rpx 30rpx;
		border-radius: 20rpx;
		padding: 0;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
		overflow: hidden;
	}

	.chart-header {
		background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
		padding: 30rpx;
		position: relative;

		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 60rpx;
			height: 6rpx;
			background: rgba(255, 255, 255, 0.3);
			border-radius: 3rpx;
		}
	}

	.chart-title-wrapper {
		height: 60rpx;
	}

	.chart-title {
		font-size: 32rpx;
		font-weight: bold;
		color: white;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	}

	.chart-container {
		padding: 30rpx;
		height: 400rpx;
	}

	// 作业展示模块
	.homework-sections {
		padding: 0 30rpx 40rpx;
	}

	.homework-section {
		background: white;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	}

	.section-header {
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.section-count {
		font-size: 26rpx;
		color: #666;
		margin-right: 20rpx;
	}

	.share-btn {
		background: #f8f9fa;
		border-radius: 20rpx;
		padding: 8rpx 16rpx;
		gap: 8rpx;
		font-size: 24rpx;
		color: #666;
	}

	.share-icon {
		width: 24rpx;
		height: 24rpx;
	}

	.homework-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20rpx;
	}

	.homework-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.homework-card {
		position: relative;
		width: 100%;
		height: 160rpx;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.homework-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.status-tag {
		position: absolute;
		top: 8rpx;
		right: 8rpx;
		padding: 4rpx 12rpx;
		border-radius: 12rpx;
		font-size: 20rpx;
		color: white;
		font-weight: 500;
	}

	.abnormal-tag {
		background: #ff4757;
	}

	.excellent-tag {
		background: #ffa502;
	}

	.improvement-tag {
		background: #747d8c;
	}

	.homework-info {
		margin-top: 12rpx;
		text-align: center;
	}

	.student-name {
		font-size: 24rpx;
		color: #333;
		font-weight: 500;
	}
</style>